// 柱状图左
(function () {
    var myChart = echarts.init(document.querySelector('.bar-l .chart'));
    var option = {
        color: ["#2f89cf"],
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '0%',
            top: 10,
            right: '0%',
            bottom: '4%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: ["旅游行业", "教育培训", "游戏行业", "医疗行业", "电商行业", "社交行业", "金融行业"],
                axisTick: {
                    alignWithLabel: true
                },
                axisLabel: {
                    color: "rgba(255,255,255,0.6)",
                    fontSize: 12
                },
                axisLine: {
                    show: false
                }
            },
        ],
        yAxis: [
            {
                type: 'value',
                axisLabel: {
                    color: "rgba(255,255,255,0.6)",
                    fontSize: 12
                },
                axisLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,0.1)",
                        //    width: 2,
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)"
                    }
                }

            }
        ],
        series: [
            {
                name: '直接访问',
                type: 'bar',
                barWidth: '35%',
                data: [200, 300, 300, 900, 1500, 1200, 600],
                itemStyle: {
                    barBorderRadius: 5,
                }

            }
        ]
    };
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
})();

// 柱状图右
(function () {
    var myChart = echarts.init(document.querySelector(".bar-r .chart"));
    //声明颜色数组
    var myColor = ['#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6'];
    var option = {
        grid: {
            top: '10%',
            left: '22%',
            bottom: '10%'
        },
        xAxis: {
            show: false
        },
        yAxis: [{
            type: 'category',
            data: ['HTML5', 'CSS3', 'javascript', 'VUE', 'NODE'],
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#fff',
                fontSize: 12
            },
            //给yAxis两个对象分别添加
            inverse: true,
        },
            {
                data: [702, 350, 610, 793, 664],
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: 12
                },
                //给yAxis两个对象分别添加
                inverse: true,
            }],
        series: [
            {
                name: '条',
                type: 'bar',
                data: [70, 34, 60, 78, 69],
                //第一组数据图元的文本标签
                label: {
                    show: true,
                    //图形内显示文本
                    position: 'inside',
                    // 文本显示格式，formatter为标签内容格式器，{}为字符串模板，将自动解析为data中的数据，其中模板变量{a}为系列名、{b}为数据名、{c}为数据值
                    formatter: '{c}%'
                },
                //条状图元为圆角
                //给 itemStyle 的 color 属性设置一个返回函数
                itemStyle: {
                    barBorderRadius: 20,
                    // color可以修改图元的颜色,params 是传进来的图元对象，dataIndex是当前图元对象的索引号
                    color: function (params) {
                        //console.log(params);
                        return myColor[params.dataIndex];
                    }
                },
                //条状图元之间的距离
                barCategoryGap: 50,
                //条状图元的高度
                barWidth: 10,
                //给series第一个对象添加
                yAxisIndex: 0,
            },
            {
                name: '框',
                type: 'bar',
                data: [100, 100, 100, 100, 100],
                barCategoryGap: 50,
                barWidth: 15,
                itemStyle: {
                    //设置框的样式
                    color: 'none',
                    borderColor: '#00C1DE',
                    borderWidth: 3,
                    barBorderRadius: 15
                },
                //给series第二个对象添加
                yAxisIndex: 1,
            },
        ]
    };
    myChart.setOption(option);
    window.addEventListener('resize', function () {
        myChart.resize();
    })
})();

// 折线图左
(function () {
    var myChart = echarts.init(document.querySelector(".line-l .chart"));
    var yearData = [
        {
            year: '2020',
            data: [
                [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
                [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
            ]
        },
        {
            year: '2021',
            data: [
                [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
                [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
            ]
        }
    ];
    var option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            textStyle: {
                color: '#4C9BFD'
            },
            right: '10%'
        },
        grid: {
            top: '20%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            show: true,              //显示边框
            borderColor: '#012F4A',  //边框颜色
            containLabel: true       //显示刻度文字
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#4C9BFD'
            },
            axisLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#4C9BFD'
            },
            axisLine: {
                show: false
            },
            splitLine: {
                lineStyle: {
                    color: '#012F4A'
                }
            }
        },
        color: ['#00F2F1', '#ED3F35'],
        series: [{
            name: '新增粉丝',
            type: 'line',
            smooth: true,
            data: yearData[0].data[0]
        },
            {
                name: '新增游客',
                type: 'line',
                smooth: true,
                data: yearData[0].data[1]
            }],

    };

    myChart.setOption(option);
    window.addEventListener('resize', function () {
        myChart.resize();
    })

    $('.line-l h2').on('click', 'a', function () {
        // console.log($(this).index());
        var obj = yearData[$(this).index()];
        option.series[0].data = obj.data[0];
        option.series[1].data = obj.data[1];
        // option中数据改变，页面需要重新渲染
        myChart.setOption(option);
    });

})();

// 折线图右
(function () {
    var myChart = echarts.init(document.querySelector(".line-r .chart"));
    var option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            top: '0%',
            textStyle: {
                color: 'rgba(255,255,255,.5)',
                fontSize: 12,
            }
        },
        grid: {
            top: 30,
            left: 10,
            right: 10,
            bottom: 10,
            containLabel: true       //显示刻度文字
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30"],
                axisLabel: {
                    textStyle: {
                        color: 'rgba(255,255,255,.6)',
                        fontSize: 12
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.2)'
                    }
                }
            }
        ],
        yAxis: {
            type: 'value',
            axisTick: {
                show: false
            },
            axisLabel: {
                textStyle: {
                    color: 'rgba(255,255,255,.6)',
                    fontSize: 12
                }
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.1)'
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.1)'
                }
            }
        },
        series: [{
            name: '播放量',
            type: 'line',
            areaStyle: {},
            data: [30, 40, 30, 40, 30, 40, 30, 60, 20, 30,
                40, 20, 40, 30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 20, 40, 30, 60, 20, 40, 20],
            smooth: true,
            lineStyle: {
                color: '#0184d5',
                width: 2
            },
            //设置填充样式为渐变色
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        //渐变色的起始颜色
                        color: "rgba(1, 132, 213, 0.4)"
                    },
                    {
                        offset: 0.8,
                        //渐变色的结束颜色
                        color: "rgba(1, 132, 213, 0.1)"
                    }
                ]),
                shadowColor: "rgba(0, 0, 0, 0.1)"
            },
            //设置拐点为小圆点
            symbol: 'circle',
            //设置拐点大小
            symbolSize: 5,
            //开始不显示，鼠标经过时才显示
            showSymbol: false,
            //设置拐点样式
            itemStyle: {
                color: '#0184d5',
                borderColor: 'rgba(221,220,107,.1)',
                borderWidth: 12
            },
        },
            {
                name: '转发量',
                type: 'line',
                areaStyle: {},
                data: [50, 30, 40, 60, 10, 50, 30, 50, 60, 50, 40, 60, 40, 80, 30, 60,
                    40, 10, 50, 30, 70, 20, 50, 10, 40, 50, 30, 70, 20, 50],
                smooth: true,
                lineStyle: {
                    color: '#00d887',
                    width: 2
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: "rgba(0, 216, 135, 0.4)"
                        },
                        {
                            offset: 0.8,
                            color: "rgba(0, 216, 135, 0.1)"
                        }
                    ]),
                    shadowColor: "rgba(0, 0, 0, 0.1)"
                },
                symbol: 'circle',
                symbolSize: 5,
                showSymbol: false,
                itemStyle: {
                    color: '#00d887',
                    borderColor: 'rgba(221,220,107,.1)',
                    borderWidth: 12
                },

            }]
    };

    myChart.setOption(option);
    window.addEventListener('resize', function () {
        myChart.resize();
    })
})();

//饼形图左
(function () {
    var myChart = echarts.init(document.querySelector(".pie-l .chart"));
    var option = {
        // color: [
        //     "#065aab", "#066eab", "#0682ab", "#0696ab", "#06a0ab",
        // ],
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/> {b}: {c} ({d}%)"
        },
        legend: {
            bottom: '0%',
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
                color: "rgba(255, 255, 255, .5)",
                fontSize: 12,
            }
        },
        series: [
            {
                name: '年龄分布',
                type: 'pie',
                center: ['50%', '42%'],
                radius: ['40%', '60%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                labelLine: {
                    show: false
                },
                data: [
                    {value: 1, name: '20岁以下'},
                    {value: 4, name: '20~29岁'},
                    {value: 2, name: '30~39岁'},
                    {value: 2, name: '40~49岁'},
                    {value: 1, name: '50岁以上'}
                ]
            }]
    };

    myChart.setOption(option);
    window.addEventListener('resize', function () {
        myChart.resize();
    })

})();

//饼形图右
(function () {
    var myChart = echarts.init(document.querySelector(".pie-r .chart"));
    option = {
        color: ["#006cff", "#60cda0", "#ed8884", "#ff9f7f", "#0096ff", "#9fe6b8", "#32c5e9", "#1d9dff"],
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            left: 'center',
            top: 'bottom',

        },

        series: [
            {
                name: '地区分布',
                type: 'pie',
                radius: ['10%', '70%'],
                center: ['50%', '42%'],
                roseType: 'radius',
                itemStyle: {
                    borderRadius: 5
                },
                label: {
                    show: true,
                    fontSize: 10,
                    color: 'inherit'
                },
                labelLine: {
                    show: true,
                    length: 6,
                    length2: 8
                },
                legend: {
                    bottom: '0%',
                    itemWidth: 10,
                    itemHeight: 10,
                    textStyle: {
                        color: "rgba(255, 255, 255, .5)",
                        fontSize: 12,
                    }
                },
                data: [
                    {value: 20, name: '云南'},
                    {value: 26, name: '北京'},
                    {value: 24, name: '山东'},
                    {value: 25, name: '河北'},
                    {value: 20, name: '江苏'},
                    {value: 25, name: '浙江'},
                    {value: 30, name: '四川'},
                    {value: 42, name: '湖北'}
                ],

            },
        ]
    };
    myChart.setOption(option);
    window.addEventListener('resize', function () {
        myChart.resize();
    })
})()